<template>
  <div id="login">
    <van-nav-bar title="登录" left-arrow fixed @click-left="onClickLeft" />

    <div class="logo">
      <img src="../../public/wx_login_logo.png" alt="" />
    </div>

    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 50px 16px 16px 16px">
        <van-button round block color="#f73a3a" native-type="submit"
          >登录</van-button
        >
        <van-button
          style="margin: 15px 0"
          round
          block
          type="default"
          @click="onRegister"
          >没有账号，点击注册</van-button
        >
      </div>
    </van-form>

    <div>
      <van-divider
        :style="{ color: '#f73a3a', borderColor: '#f73a3a', padding: '0 16px' }"
      >
        其他方式登录
      </van-divider>
      <div class="login-icon">
        <div>
          <van-icon
            size="30px"
            class-prefix="icon"
            name="QQ-circle-fill"
          />
          <span>QQ</span>
        </div>
        <div>
          <van-icon
            size="28px"
            class-prefix="icon"
            name="zhifubao"
          />
          <span>支付宝</span>
        </div>
        <div>
          <van-icon
            size="30px"
            class-prefix="icon"
            name="youxiang"
          />
          <span>邮箱注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      this.$router.push("index");
    },
    onRegister() {
      this.$router.push("resgister");
    },
  },
};
</script>

<style lang="scss">
#login {
  .van-nav-bar {
    background-color: #f73a3a;
    .van-nav-bar__title {
      color: #fff;
    }
    .van-icon {
      color: #fff;
    }
  }
  .logo {
    margin-top: 46px;
    padding: 50px;
    img {
      width: 100%;
    }
  }
  .van-divider {
    margin-top: 30px;
  }
  .login-icon {
    display: flex;
    justify-content: space-around;
    div {
      align-items: center;
      display: flex;
      span {
        margin-left: 5px;
        align-items: center;
      }
    }
  }
}
</style>